<template>
	<view>
		<w-navbar type="normal"
			background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">标签</view>
		</w-navbar>


		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="page-flex">
				<view class="page-lable-item" v-for="(color,index) in lableColorList" :key="index">
					<w-label :backgroundColor="color" textColor="#fff">标签</w-label>
				</view>
			</view>
		</pageDemoBlock>

		<pageDemoBlock title="镂空标签" color="#aaaa00">
			<view class="page-flex">
				<view class="page-lable-item" v-for="(color,index) in lableColorList" :key="index">
					<w-label :borderColor="color">标签</w-label>
				</view>
			</view>
		</pageDemoBlock>

	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block'
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				lableColorList: ['#01AAFF', '#A79FFF', '#FAD3B6', '#C8C8A9', '#DFCA75', '#FCA3A1', '#979AC3', '#D291A7',
					'#898ad2', '#bed2a3'
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		height: 140rpx;

		.page-lable-item {
			width: 20%;
			display: flex;
			justify-content: center;
			height: 50%;
			align-items: center;
		}
	}
</style>
